import Taro, {Component} from "@tarojs/taro";
import {View, Image} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,namePartOf,cardNumPartOf} from '../../utils/common'
import './card.less'


import icon_86 from "../../assets/img/common/icon_86.png";
import icon_87 from "../../assets/img/common/icon_87.png";
import noneIcon from "../../assets/img/common/none_card.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class MineCard extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: []
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '我的银行卡'})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  componentDidShow(): void {
    this.getUserCards()
  }

  getUserCards() {
    let { userStore } = this.props.stores
    userStore.getUserCards({
      callback: res => {
          this.setState({
            items: res.items
          })
        }
    })
  }

  // 删除银行卡
  onDelete(id: number){
    if(!id){ getRuntime().showToast('参数错误~') }
    let { userStore } = this.props.stores
    getRuntime().showModal('你确定要删除该银行吗？','',() => {
      userStore.removeUserCard({
        id,
        callback: res => {
          this.getUserCards()
          getRuntime().showToast('删除银行卡成功~')
        }
      })
    })
  }

  render() {
    let { items } = this.state
    return (
      <View className='mine-card'>
        {
          items.length>0&&
          <View className='my-my_card'>
             <View className='list-22'>
               {
                 items.map(item => {
                   return(
                     <View className='list-22-item'>
                       <Image src={icon_86} className='img' />
                       <View className='info'>
                         <View className='list-title'>{item.bankName}</View>
                         <View className='list-desc'>储蓄卡 {namePartOf(item.cardName)}</View>
                         <View className='card-no'>{cardNumPartOf(item.cardNumber)}</View>
                       </View>
                       <Image src={icon_87} className='r' onClick={this.onDelete.bind(this, item.id)} />
                     </View>
                   )
                 })
               }
             </View>
          </View>
        }
        {
          items.length<=0&&
          <View className='none'>
             <Image className='none-icon' src={noneIcon} />
             <View className='none-tips'>还没有添加银行卡哦！</View>
          </View>
        }
        <View className='footer-block' />
        <View className='page-submit' onClick={this.link.bind(this,'/pages/mine/cardAdd')}>+ 添加银行卡</View>
      </View>
    )
  }
}

export default MineCard
